<template>
	<div>
		<!-- 查询表单区域 -->
		<!-- 搜索框 -->
		<el-card class="box-card card-toubu" shadow="never">
		  <div class="text item">
		    <i class="el-icon-search"></i>&nbsp;
		    <span>筛选搜索</span>
		    <br />
		    <br />
			<el-form :inline="true" :model="querySpu" class="demo-form-inline">
			  <el-form-item label="商品名称">
				<el-input
				  v-model="querySpu.name"
				  placeholder="请输入商品名称"
				></el-input>
			  </el-form-item>
			  <el-form-item label="商品分类">
				<el-cascader
				  clearable
				  v-model="value"
				  :options="categories"
				  @change="handleChange(value)"
				></el-cascader>
			  </el-form-item>
			  <el-form-item label="商品品牌">
				<el-select
				  v-model="querySpu.brandId"
				  placeholder="请选择商品品牌"
				  clearable
				>
				  <el-option
					v-for="item in brands"
					:key="item.id"
					:label="item.name"
					:value="item.id"
				  >
				  </el-option>
				</el-select>
			  </el-form-item>
			  <el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
			  </el-form-item>
			</el-form>
		  </div>
		</el-card>
		<el-card class="box-card card-toubu" shadow="never">
		  <div class="text item">
		    <i class="el-icon-tickets"></i>&nbsp;
		    <span>数据列表</span>
		  </div>
		</el-card>
		<!-- 表格区域 -->
		<el-table :data="tableData" style="width: 100%" border>
		  <el-table-column label="编号" prop="id"></el-table-column>
		  <el-table-column label="商品图片" width="200">
		    <template slot-scope="scope">
		      <img :src="scope.row.image" width="150px" height="150px" />
		    </template>
		  </el-table-column>
		  <el-table-column label="商品名称">
		    <template slot-scope="scope">
		      <span v-for="(a,b) in scope.row.name.split(' ')" :key="a">
		        <p v-if="b == 0">
		          {{a}}
		        </p>
		      </span>
			  <span>品牌: {{ scope.row.brandName }}</span>
		    </template>
		  </el-table-column>
		  <el-table-column label="货号">
		    <template slot-scope="scope"> 货号：{{ scope.row.psn }} </template>
		  </el-table-column>
		  <el-table-column label="标签">
		    <template slot-scope="scope">
		      <span v-if="scope.row.pmarketable == 1">上架：</span>
		      <span v-else>下架：</span>
		      <el-switch
		        v-model="scope.row.pmarketable"
		        active-color="#13ce66"
		        inactive-color="#ff4949"
		        :active-value="1"
		        :inactive-value="0"
				@change="offShelfSpu(scope.row)">
		      </el-switch>
		    </template>
		  </el-table-column>
		  <el-table-column label="销量" prop="saleNum"></el-table-column>
		  <el-table-column label="审核状态" prop="pstatus">
		    <template slot-scope="scope">
		      <span v-if="scope.row.pstatus == 1">已审核</span>
		      <span v-else>未审核</span>
		    </template>
		  </el-table-column>
		  <el-table-column label="操作" align="right">
		    <template slot-scope="scope">
		      <el-button size="mini" @click="handleEdit(scope.row.id)" >查看</el-button>
		      <el-button size="mini" type="danger" @click="audit(scope.row.id)">审核</el-button
		      >
		    </template>
		  </el-table-column>
		</el-table>
		<!-- 分页控件 -->
		<el-pagination
		  @size-change="handleSizeChange"
		  @current-change="handleCurrentChange"
		  :current-page="currentPage"
		  :page-sizes="pageSizes"
		  :page-size="pageSize"
		  layout="total, sizes, prev, pager, next, jumper"
		  :total="total"
		>
		</el-pagination>
		<!-- dialog对话框控件 -->
		<el-dialog title="商品审核" :visible.sync="dialogFormVisible">
			<el-form :model="auditSku" label-width="80px">
				<el-form-item label="商品名称">
				  <el-input v-model="auditSku.name"></el-input>
				</el-form-item>
				<el-form-item label="商品审核">
					<el-radio-group v-model="auditSku.status">
					  <el-radio :label="1" value="1">审核通过</el-radio>
					  <el-radio :label="0" value="0">审核不通过</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="反馈详情">
					<el-input type="textarea" v-model="auditSku.message"></el-input>
				</el-form-item>
			</el-form>
		    <div slot="footer" class="dialog-footer">
		      <el-button @click="dialogFormVisible = false">取 消</el-button>
		      <el-button type="primary" @click="myAuditSpu">确 定</el-button>
		    </div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data () {
		return {
			// 数据接收数组
			tableData: [],
			// 总行数
			total: 0,
			// 选择显示每页多少数据数组
			pageSizes: [10, 20, 30, 40],
			// 页号
			currentPage: 1,
			// 页大小
			pageSize: 10,
			// 品牌名称
			brandName: "",
			// 查询条件
			querySpu: {},
			// 商品品牌
			brands: [],
			// 商品分类
			categories: [],
			// 商品分类数组值
			value: [],
			// 对话框
			dialogFormVisible: false,
			// 审核对象
			auditSku: {
				name: '',
				status: ''
			}
		}
	},
	methods: {
	  // 初始化数据方法
	  async getSpu() {
		const { data: res } = await this.$http.post(
		  `vi/goods/spu/selectSpuAndSkuOnStatus/${this.currentPage}/${this.pageSize}`,
		  this.querySpu
		);
		this.tableData = res.data.pageUtils.rows;
		this.total = res.data.pageUtils.total;
	  },
	  // 页大小改变方法
	  handleSizeChange(val) {
		this.pageSize = val;
		this.getSpu();
	  },
	  // 页号改变方法
	  handleCurrentChange(val) {
		this.currentPage = val;
		this.getSpu();
	  },
	  // 初始化商品品牌列表
	  async getBrand() {
		const { data: res } = await this.$http.get("vi/goods/brand/list");
		this.brands = res.data.list;
	  },
	  // 初始化商品分类
	  async getCategory() {
		const { data: res } = await this.$http.get(
		  "vi/goods/category/queryAllCategory"
		);
		this.categories = res.data.maps;
	  },
	  // 条件查询提交
	  onSubmit() {
		this.getSpu();
	  },
	  // 通过 Id 查询出当前商品审核详情
	  async audit (id) {
		  this.dialogFormVisible = true
		  const { data: res } = await this.$http.get(`vi/goods/sku/finkSkuAndSpuBySkuId/${id}`)
		  this.auditSku.id = id
		  this.auditSku.name = res.data.spuAndSku.name
		  this.auditSku.status = res.data.spuAndSku.pstatus
	  },
	  // 审核商品
	  myAuditSpu () {
		  const id = this.auditSku.id
		  const status = this.auditSku.status
		  const message = this.auditSku.message
		  this.$http.get(`vi/goods/spu/audit/${id}/${status}/${message}`)
		  this.$message.success("审核完成")
		  this.dialogFormVisible = false
		  this.getSpu()
	  },
	  // 商品下架上架方法
	  async offShelfSpu(row) {
	    if (row.pmarketable === 0) {
	      const { data: res } = await this.$http.get(
	        `vi/goods/spu/pull?id=${row.spuId}`
	      );
	      this.getSpu();
	      return this.$message.success(res.message);
	    } else {
	      const { data: res } = await this.$http.get(
	        `vi/goods/spu/put?id=${row.spuId}`
	      );
	      this.getSpu();
	      return this.$message.success(res.message);
	    }
	  },
	  handleEdit (id) {
		  this.$message.info("抱歉，当前功能还未完善")
	  }
	},
	created() {
	  this.getSpu();
	  this.getBrand();
	  this.getCategory();
	}
}
</script>

<style>
</style>
